import React, { useEffect } from 'react';
import { Button, Select, Space, Message } from 'antd';
import { TjGreenSelect } from '@/pages/ETrade/components';
import { useTRState } from '#/utils/trHooks.jsx';
import { HttpCode } from '#/utils/contacts.js';
import styles from './index.less';
import { queryParamConfig } from '../../services';
import { UploadOutlined } from '#/utils/antdIcons';
const filter_dict = {
  北交所: 'beiJiaoSuo',
  中国绿证: 'chinaGreenCertificate',
  电源类型: 'electricityType',
  开始月份: 'startMonth',
  结束月份: 'endMonth',
  环境类型: 'environmentalType',
  广交所: 'guangJiaoSuo',
  可再生: 'renewable',
  补贴类型: 'subsidizeType',
  白名单: 'whiteList',
};
const Header = ({ power, loading, getDataSource, onExport }) => {
  const [state, setState] = useTRState({
    selectInfo: '筛选条件',
    showModal: false,
    canExport: false,
    stationlist: [],
    filterList: [],
    params: {
      stationIds: [],
    },
    originFilterList: [],
    loading: true,
  });
  useEffect(() => {
    if (power.length > 0) {
      setState({ loading: true });
      fetch();
      if (state.filterList.length < 1) {
        _onFinish();
      }
    }
  }, [power]);
  const fetch = async () => {
    // 查询
    const res = await queryParamConfig();
    let filterList = [{ label: '日期' }];
    let stationlist = [];
    if (power.length > 0) {
      let obj = {
        label: '场站',
        list: [],
        hasSearch: true,
      };
      power.map((x) => {
        // 场站
        let label = x.label == '全省' ? x.provinceName + '-' + x.label : x.label;
        const temp = {
          label,
          value: x.value,
        };
        stationlist.push(temp);
        obj.list.push(label);
      });
      filterList.unshift(obj);
    }
    if (res.statusCode === HttpCode.SUCCESS) {
      for (var key in res.data) {
        let obj = {
          label: key,
          list: res.data[key],
        };
        filterList.push(obj);
      }
    }
    setState({ filterList, stationlist, loading: false, originFilterList: filterList });
  };

  const _onFinish = async () => {
    // 查询
    getDataSource?.(state.params);
  };

  const _onReset = () => {
    // 重置
    let params = {
      stationIds: [],
    };
    setState({
      params,
      filterList: state.originFilterList,
      selectInfo: '筛选条件',
    });
    getDataSource?.(params);
  };
  const getfilterInfo = async (filterList) => {
    let selectInfo = [];
    let params = {
      stationIds: [],
    };
    filterList.map((item) => {
      if (!!item.value && item.value.length > 0) {
        let text = '';
        if (
          item.label == '场站' &&
          item.value.length > 0 &&
          item.value.length !== state.stationlist.length
        ) {
          state.stationlist.map((x) => {
            if (item.value.includes(x.label)) {
              params.stationIds.push(x.value);
            }
          });
        } else if (item.label == '日期') {
          if (item.value?.[0] && item.value?.[1]) {
            text = `日期=${item.value[0]}-${item.value[1]}`;
            params.startMonth = item.value[0] + '-01';
            params.endMonth = item.value[1] + '-01';
          }
        } else {
          text = `${item.label}=${item.allSelect ? '全部' : item.value.join(',')}`;
          if (!item.allSelect) {
            if (['电源类型', '环境类型', '补贴类型'].includes(item.label)) {
              params[filter_dict[item.label]] = item.value;
            } else {
              params[filter_dict[item.label]] = item.value[0];
            }
          } else {
            params[filter_dict[item.label]] = undefined;
          }
        }
        if (text != '') {
          selectInfo.push(text);
        }
      }
    });
    setState({
      showModal: false,
      filterList,
      selectInfo: selectInfo.length > 0 ? selectInfo : '筛选条件',
      params,
    });
  };

  return (
    <div className={styles.header}>
      <Space size={16}>
        <Select
          mode={state.selectInfo !== '筛选条件' ? 'multiple' : ''}
          className={styles.moreSelect}
          value={state.selectInfo}
          open={false}
          onDeselect={() => {
            setState({ showModal: true });
          }}
          onClick={() => {
            if (state.filterList.length > 0) {
              setState({ showModal: true });
            }
          }}
        />
        <Button loading={state.loading || loading} type="primary" onClick={_onFinish}>
          查询
        </Button>
        <Button loading={state.loading || loading} ghost onClick={_onReset}>
          重置
        </Button>
        <TjGreenSelect
          visible={state.showModal}
          filterList={state.filterList}
          onClose={getfilterInfo}
        />
      </Space>

      <Button style={{ padding: 0 }} type="link" icon={<UploadOutlined />} onClick={onExport}>
        导出
      </Button>
    </div>
  );
};
export default Header;
// export default connect(({ global, greenCertificateAnalysis }) => ({
//   power: greenCertificateAnalysis.power,
// }))(Header);
